import { Button, Table } from 'antd';
import { Fragment, useEffect, useState, useTransition } from 'react';
import { useLocation } from 'react-router';
import UserForm from './components/UserForm';
import useModal from '@/hooks/useModal';
// import axios from 'axios';
import { getUsers } from '@/api/user'
import Styles from './index.module.css';


export default function User() {
  const locationInfo = useLocation();
  const { modal, contextHolder } = useModal();

  // 列表数据
  const [tableData, setTableData] = useState([]);
  const [ispending] = useTransition();
  const [show, setShow] = useState(false);
  const [rowData, setRowData] = useState<Record<string, string | number> | null>(null);

  useEffect(() => {
    // axios.get(`${location.origin}/api/user/list`).then(({ data }) => {
    //   console.log('data', data);
    //   setTableData(data?.data?.list || []);
    // })
    getUsers().then(({ data }) => {
      setTableData(data?.list || []);
    })
  }, [])

  return (
    <div className={Styles.container}>
      {/* 标题 */}
      <div className={Styles.title}>{locationInfo?.state?.title || 'User'}</div>

      {/*  */}
      <div className={Styles.mainContent}>

        {/* 操作栏 */}
        <div className={Styles.toolbar}>
          <Button type='primary' onClick={() => setShow(true)}>新增</Button>
        </div>

        <div>
          <Table
            virtual
            loading={ispending}
            scroll={{
              y: 500,
              // x: 1000,
            }}
            rowKey={"id"}
            dataSource={tableData}
            columns={[
              {
                title: '用户ID',
                key: 'id',
                dataIndex: 'id',
                render(_value, record: Record<string, string | number>) {
                  return (
                    <div style={{ display: 'flex', alignItems: 'center' }}>
                      <img style={{ height: 48, width: 48, borderRadius: 8 }} src={record.avter as string} />
                      <span style={{ paddingInline: 4 }}>{record.id}</span>
                    </div>
                  )
                },
              },
              {
                title: '用户名称',
                key: 'name',
                dataIndex: 'name',
              },
              {
                title: '邮箱',
                key: 'email',
                dataIndex: 'email',
              },
              {
                title: '用户性别',

              },
              {
                title: '用户职务',
              },
              {
                title: '操作',
                key: 'options',
                dataIndex: 'dataIndex',
                render(_value, record: Record<string, string | number>, ) {
                  return (
                    <Fragment>
                      <Button type='text' size='small' onClick={() => {
                        setShow(true);
                        setRowData(record)
                      }

                      }>编辑</Button>
                      <Button type='text' size='small'>查看</Button>
                      <Button type='text' size='small' onClick={() => {
                        const confirmed = modal.confirm({
                          title: '提示',
                          content: '确定要删除当前选中用户吗？',
                          onOk: () => {
                            confirmed.destroy();
                          },
                          onCancel: () => {
                            confirmed.destroy();
                          }
                        })
                      }}>删除</Button>
                    </Fragment>
                  )
                }
              }
            ]}
          />
        </div>

        {
          show ? (
            <UserForm 
              rowData={rowData}
              onClose={() => {
                setShow(false);
                setRowData(null);
              }}
              onFinish={() => {

              }}
            />
          ): null
        }
        {contextHolder}
      </div>
    </div>
  )
}